<!-- <h1>用户管理</h1> -->
<template>
    <div>
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
      <div class="pb10px">
        <!-- ctrl+alt+l 格式化代码   -->
        <el-input v-model="searchForm.userName"  class="input1" clearable placeholder="请输入用户名" size="small" ></el-input>
        <el-button type="primary" icon="el-icon-search" size="small" class="mr10px" @click="handleSearch">搜索</el-button>
      </div>
  
      <div>
        <el-button type="primary" @click="handleAdd" size="small">新增</el-button>
        <!-- <el-button type="danger" size="small" @click="batchDelete" :disabled="ids.length>0?false:true">批量删除
        </el-button> -->
      </div>
  
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="id"
            label="ID"
            width="50">
        </el-table-column>
        <el-table-column
            prop="userName"
            label="用户名"
            width="220">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            width="220">
        </el-table-column>
        <el-table-column
            prop="realName"
            label="真实姓名"
            width="220">
        </el-table-column>
        <el-table-column
            prop="roleId"
            label="角色ID"
            width="120">
        </el-table-column>
        <el-table-column
            prop="roleName"
            label="角色名"
            width="220">
        </el-table-column>
        <!--      fixed="right"-->
        <el-table-column label="操作"
                         width="250"
                         align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-tooltip class="item" effect="dark" content="分配用户已有项目或者售后处理的项目" placement="top">
            <el-button
                size="mini"
                type="primary"
                @click="to(scope.$index, scope.row)">分配项目
            </el-button>
            </el-tooltip>
            <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
            
          </template>
        </el-table-column>
      </el-table>
      
      

      <!--自定义分页组件-->
      <custom-pages
          @current-change="currentChange"
          @size-change="sizeChange"
          :total="pageInfo.total"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.pageNum"
          class="custom-pages"
      >
      </custom-pages>
      <!--自定义分页组件-->
  
      <!--自定义抽屉组件-->
      <custom-drawer
          :form-data="formData"
          :rules-form="ruleForm"
          @close-drawer="closeDrawer"
          @submit-drawer="submitDrawer"
          :is-drawer-dialog="isDrawerDialog"
      >
        <div slot="content">
          <el-form-item label="用户名" prop="userName" >
            <el-input v-model="formData.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password" v-if="judge1=='1'">
            <el-input v-model="formData.password" type="password" placeholder="请输入密码" v-if="judge1=='1'"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email" >
            <el-input v-model="formData.email" placeholder="请输入邮箱"></el-input>
          </el-form-item>

          <el-form-item label="真实姓名" prop="realName" v-if="judge1=='2'">
            <el-input v-model="formData.realName" placeholder="请输入真实姓名" v-if="judge1=='2'"></el-input>
          </el-form-item>


          <el-form-item label="角色类型" prop="roleId" v-if="judge1=='2'">
          <el-select v-model="formData.roleId" placeholder="请选择角色">
            <el-option
              v-for="item in rolelist"
              :key="item.id"
              :label="item.roleDesc"
              :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>
        </div>
      </custom-drawer>
      <!--自定义抽屉组件-->
      
      <el-dialog
        title="提示"
        :visible.sync="error"
        width="30%"
        append-to-body
        top="20%"
        ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
        <span>{{ message }}</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="error = false">取 消</el-button>
            <el-button type="primary" @click="error = false">确 定</el-button>
        </span>
        </el-dialog>

    </div>
  </template>
  
  <script>
  
  //引入混入
  import create from "@/mixins/create"
  import bcrypt from 'bcryptjs'
  import http from '@/utils/request';
  
  export default {
    data() {
      //页面格式化 ctrl+alt+l
      return {
      
        isDrawerDialog1: false,
        isDrawerDialog2: false,
        api: {
          pageUrl: "/system/getuser",
          saveUrl: "/system/adduser",
          delUrl: "/system/deleteuser",
          modUrl:"/system/updateuser",
          search:"/system/selectuser",
        },
        ruleForm: {
          userName: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
          realName: [
            {required:false, message: '请输入真实姓名', trigger: 'blur'},
          ],
        },
       
        formData: {
          id: null,
          userName: "", //新增的用户名称
          email:"",//邮箱
          password:"",
          realName:"",
        },
        searchForm: {
          userName: ""
        },
        rolelist: [{
          id: '',
          roleDesc: ''
        }, ],
        value: '',
        
        judge1: null,
        message:'',
      }

    },
    mixins: [create],
    created() {
      this.getrole()
    },
    methods: {
      to(index,row){
        sessionStorage.setItem('userId2',row.id)
        this.$router.push('UserOwend')
      },
      //获取角色列表
      getrole(){
        
        http.get('/system/getrole').then((res)=>{
          if(res.data.code == 200){
            this.rolelist = res.data.data;
          }
          

        })

      },
      
      
      getList() {
            let formData = {
                  //当前页
                  pageNum: this.pageInfo.pageNum,
                  //分页大小
                  pageSize:this.pageInfo.pageSize,
                  //总条数
                  total: this.pageInfo.total,
            };
            let data = Object.assign(this.searchForm, this.pageInfo)
            http.get(`${this.api.pageUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                if(res.data.code ==200){
                  this.tableData = res.data.data.records
                  this.pageInfo.total = res.data.data.total//动态获取分页
                  console.log(res)
                }
                
                
            })
      },

       //提交数据
       submitDrawer(e) {
            //增加数据
            if(sessionStorage.getItem('judge') == '1'){
                 // var salt = bcrypt.genSaltSync(12);    //定义密码加密的计算强度,默认10
                var hash = bcrypt.hashSync(this.formData.password, '$2a$12$c2Sr/uy88pQhDkzKhWF4we');    //把自己的密码(this.user.password)带进去,变量hash就是加密后的密码 ,salt
                console.log(hash)
                http.post(this.api.saveUrl, {
                  
                  userName: this.formData.userName, //新增的用户名称
                  email:this.formData.email,//邮箱
                  password:hash,
                  
                }).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else {
                        this.message=res.data.msg;
                        this.error=true;
                        // this.$message({
                        //     message: res.data.msg,
                        //     type: 'error'
                        // });
                        this.getList()
                    }
                })
            }
            //修改数据
            else if(sessionStorage.getItem('judge') == '2'){
                http.post(this.api.modUrl, e).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        this.isDrawerDialog = false
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                        this.getList()
                    }
                    else{
                        this.message=res.data.msg;
                        this.error=true;
                        // this.$message({
                        //       message: res.data.msg,
                        //       type: 'error'
                        //   });
                      }
                })
            }
        },
        //搜索
        handleSearch() {
            let formData1={
                //当前页
                pageNum: this.pageInfo.pageNum,
                //分页大小
                pageSize:this.pageInfo.pageSize,
                
                userName:this.searchForm.userName,
            }
            
            http.get(`${this.api.search}?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        console.log(res)
                        this.message=res.data.msg,
                        this.error=true,
                        //更换表格数据
                        this.tableData = res.data.data.records
                        this.pageInfo.total = res.data.data.total//动态获取分页
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        this.getList()
                    }
                })
        },
       
        
    },
   
    mounted() {
        
    },
  };
  </script>
  
  <style scoped>
  .input1{
    width: 260px;
  }
  .notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */
  .custom-pages {
      position: absolute;
      /* position: relative; */
      top: 100%;
      /* 设置其始终位于页面底部 */
  } 
  </style>